<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			我的收藏
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="search-conten">
			<view style="color: #9b9b9b;text-align: center;padding: 20rpx 0;">此页面中仅展示未添加进收藏夹的内容</view>
			<view class="collect-list-box">
				<collect-list ref="contentList" :dataList='content' @refreshContent="refresh" :canSwipe="false"
					:swipeOptions="swipeOptions" :edit="true"></collect-list>
			</view>
			<view class="operation-bottom">
				<!-- <tn-checkbox-group @change="radioGroupChange">
					<tn-checkbox v-model="selectAll">全选</tn-checkbox>
				</tn-checkbox-group> -->
				<view style="flex:1">已选{{selectCount}}篇</view>
				<view class="operation-btnr" @click="add">确认添加</view>
			</view>
			<tn-load-more class="load-more" :status="loadStatus" loadingIconType="flower"></tn-load-more>
			<tn-empty style="position: fixed;left: 50%; transform: translateX(-50%);top:40%" mode="list"
				v-if="content.length == 0"></tn-empty>
		</view>
	</view>
</template>

<script>
	import {
		getCollectByUser,
		batchSave
	} from '@/util/index.js'
	export default {
		data() {
			return {
				id: '',
				title: '',
				page: 1,
				limit: 20,
				content: [],
				loadStatus: 'loading', // 加载状态：more|loading|noMore
				swipeOptions: [{
					name: '取消收藏',
					action: 'del',
					style: {
						bgColor: '#FFA726',
						width: '150rpx'
					}
				}],
				type: 'collect',
				list: [{
					tabName: '作品'
				}, {
					tabName: '收藏夹'
				}],
				current: 0,
				isEdit: false,
				operationflag: false,
				selectAll: false,
				selectCount: 0,
				contentsVOList: []
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getList()
		},
		methods: {
			change(index) {
				this.current = index;
			},
			add() {
				batchSave({
					collectionFoldersId: this.id,
					contentsVOList: this.contentsVOList
				}).then((res) => {
					uni.showToast({
						title: '添加成功！',
						icon: 'none'
					})
					this.navigateBackRefresh()
				})
			},
			getList() {
				getCollectByUser({
					page: this.page,
					limit: this.limit,
					selectType: '1',
					folderType:'1'
				}).then((res) => {
					res.list.forEach((item) => {
						item.checked = false
					})
					this.content = this.content.concat(res.list)
					if (this.content.length < res.total) {
						this.loadStatus = 'loading'
					} else {
						this.loadStatus = 'noMore'
					}
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			refresh(e) {
				if (e.length) {
					this.content = e
					let num = 0
					let list = []
					e.forEach(item => {
						if (item.checked) {
							num++;
							list.push({
								id: item.id,
								type:item.type
							})
						}
					})
					this.contentsVOList = list
					this.selectCount = num
				} else {
					this.page = 1
					this.content = []
					this.getList()
				}
			},
			allOperation() {
				this.isEdit = !this.isEdit
				this.operationflag = false
			},
			operationEdit() {
				this.operationflag = !this.operationflag
			},
			radioGroupChange() {
				this.selectAll = !this.selectAll
			},
			navigateBackRefresh() {
				uni.$emit('refreshData')
				uni.navigateBack()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.content = []
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.loadStatus == 'noMore') return
			this.page++;
			this.getList();
		},
	}
</script>

<style lang="less">
	.search-conten {
		min-height: 100vh;
	}

	.load-more {
		padding: 20rpx;
	}

	.favorites-box {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;

		.favorites-name {
			font-size: 28rpx;
			color: #333333;
			height: 80rpx;
			line-height: 80rpx;
		}

		.collect-switch {
			font-size: 28rpx;
			color: #333333;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.collect-list-box {
		width: 100%;
		border-radius: 5rpx;
		background-color: #eeeeee;
	}



	.operation-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		height: 120rpx;
		border-top: 1rpx solid #EEEEEE;
		padding: 0 25rpx 10rpx 25rpx;

		.operation-btnl {
			width: 120rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 25rpx;
			line-height: 50rpx;
			border: 1rpx solid #9b9b9b;
			margin-right: 20rpx;
		}

		.operation-btnr {
			width: 150rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 25rpx;
			line-height: 50rpx;
			background-color: #007AFF;
			color: #FFFFFF;
		}
	}
</style>
